<template>
	<view class="home-wrapper">
		<SearchLink></SearchLink>
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay indicator-color="rgba(255.255.255.0)" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in swiperdata" :key="index">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>

		<!-- 导航栏 -->
		<view class="nav">
			<image v-for="(item,index) in catitems" :key="index" :src="item.image_src"></image>
		</view>
		<!-- 楼层 -->
		<view class="floor" v-for="(item,index) in floordata" :key="index">
			<view class="floor-item">
				<image :src="item.floor_title.image_src"></image>
			</view>
			<view class="ceng">

				<image :src="item.product_list[0].image_src"></image>

				<view class="right">
					<image v-if="index" v-for="(subItem,index) in item.product_list" :key="index" :src="subItem.image_src" mode=""></image>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import SearchLink from '@/components/SearchLink.vue'
	// 引入request 方法 /已全局导入，把request方法挂载到Vue原型上
	// import request from '@/utils/reuest.js'
	export default {
		components: {
			SearchLink
		},
		data() {
			return {
				// 轮播图列表
				swiperdata: [],
				// 导航列表
				catitems: [],
				// 楼层列表
				floordata: [],

			}
		},
		onLoad() {
			this.getSwiperdata();
			this.getCatitems();
			this.getFloordata();
		},
		methods: {
			async getSwiperdata() {
				let data = await this.$request({
					url: '/api/public/v1/home/swiperdata',

				})
				this.swiperdata = data
			},
			async getCatitems() {
				let data = await this.$request({
					url: '/api/public/v1/home/catitems',

				})
				this.catitems = data
			},
			async getFloordata() {
				let data = await this.$request({
					url: '/api/public/v1/home/floordata',

				})
				this.floordata = data
			}
		}
	}
</script>

<style scoped lang="less">
	swiper {
		width: 100%;
		height: 350rpx;

		swiper-item {
			image {
				width: 100%;
			}
		}

	}

	.nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 194rpx;

		image {
			height: 140rpx;
			width: 128rpx;
		}
	}

	.floor {
		.floor-item {
			>image {
				width: 100%;
				height: 88rpx;
			}
		}

		.ceng {
			width: 100%;
			display: flex;
			padding: 20rpx 17rpx;

			>image {
				height: 386rpx;
				width: 232rpx;
			}

			.right {
				flex: 1;

				>image {
					width: 232rpx;
					height: 188rpx;
					margin: 0 0 10px 8px;

				}
			}
		}




	}
</style>
